<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>CSSsprites</title>

</head>
<body>

<input type="file" id="files" multiple="multiple">
<div id='hk'></div>

<script type="text/javascript">

    CSSsprites=function(id,hook){
        this.inputfiles=document.getElementById(id);
        this.ocanvas=document.createElement('canvas');
        this.ctx=this.ocanvas.getContext("2d");
        this.ocanvasW=0;
        this.ocanvasH=0;
        this.oreader=null;
        this.oimg=document.createElement('img');
        this.ocssCont=document.createElement('div');
        this.aImages=[];
        this.afileNames=[];
        this.hook=document.getElementById(hook)||document.body;

    }
    CSSsprites.prototype={
        init:function(){

            this.addEvent(this.inputfiles,this.handleFiles)
            this.ocanvas.width=this.ocanvasW;
            this.ocanvas.height=this.ocanvasH;
            this.hook.appendChild(this.ocanvas);
            this.hook.appendChild(this.ocssCont);
        },
        addEvent:function(o,fn){
            var _this=this;

            o.addEventListener('change',function(e){
                 fn(e,_this);
            },false);
        },
        handleFiles:function(e,_this){
            if(!location.protocol.match(/^http/)&&navigator.appVersion.indexOf('AppleWebKit')>-1){
                alert('请把文件放在服务器上运行');
            }
            var fileList=e.target.files;
            for (var i = 0; i < fileList.length; i++) {
                var imageType = /image.*/;
                if (!fileList[i].type.match(imageType)) {
                    continue;
                }
                _this.uploadImg(i,fileList);

            }

        },
        uploadImg:function(i,fileList){
            var _this=this;
            if(typeof FileReader!=='undefined'){
                 var  reader = new FileReader(),
                file = fileList[i];
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    var dataURI=e.target.result;
                    var oImage=new Image();
                    oImage.onload=function(){
                        _this.aImages.push(oImage);
                        if(file.name){
                            _this.afileNames.push(file.name);
                        }else{
                            _this.afileNames.push(file.fileName);
                        }

                        if(i==fileList.length-1){
                            _this.sprites()
                        }
                    }
                    oImage.src=dataURI;

                }
            }else{
                alert('你的浏览器不支持！ ');
            }
        },
        sprites:function(){
            var oImg,w=0,h=0,tmpH=0,scssCont='';
            //计算宽高
            this.ocanvasH=0;
            for(var i=0,iLen=this.aImages.length;i<iLen;i++){
                w=this.aImages[i].width;
                h=this.aImages[i].height;
                this.ocanvasW=Math.max(this.ocanvasW,w);
                this.ocanvasH+=h;
            }
            this.ocanvas.width= this.ocanvasW;
            this.ocanvas.height= this.ocanvasH;

            //画图并添加css
            scssCont='.sprites{background:url(png.png) no-repeat;}<br/>';
            for(var i=0,iLen=this.aImages.length;i<iLen;i++){
                w=this.aImages[i].width;
                h=this.aImages[i].height;
                this.ctx.drawImage(this.aImages[i],0,tmpH,w,h);

                scssCont+='.'+this.afileNames[i].match(/\w+/)+'{background-position:0  -'+tmpH+'px;'+
                        ' width:'+w+'px; height:'+h+'px; }<br/>';
                tmpH+=h;

            }
            
            this.ocssCont.innerHTML=scssCont;

            this.hook.removeChild(this.ocanvas);
            this.oimg.src=this.ocanvas.toDataURL();
            this.hook.appendChild(this.oimg);

        }
    }
    var oCSSsprites=new CSSsprites('files','hk');
    oCSSsprites.init();

</script>
</body>
</html>